<template>


    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-button type="primary" @click="dialogTableVisible = true">
                    新增
                </el-button>
                <el-button type="primary">批量删除</el-button>

            </el-aside>
            <el-main></el-main>
            <el-aside width="200px">

                <el-icon @click="gettraceab()">
                    <Refresh />
                </el-icon>
                &nbsp;&nbsp;
                <el-icon>
                    <Setting />
                </el-icon>
                &nbsp;&nbsp;
                <el-icon>
                    <Filter />
                </el-icon>
            </el-aside>
        </el-container>
    </div>
    {{ multipleSelection }}
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed type="index" label="序号" width="55" />
        <el-table-column prop="goodsName" label="商品名称" width="120" />
        <el-table-column prop="productionBatch" label="生产批次" width="120" />
        <el-table-column prop="expirationDate" label="保质期" width="80" />
        <el-table-column prop="productionLicense" label="生产许可证号" width="140" />
        <el-table-column prop="productionFrim" label="生产企业" width="200" />
        <el-table-column prop="createName" label="创建人" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180">
            <template #default="scope">
                {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" width="80" />
        <el-table-column fixed="right" label="操作" min-width="320">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="FindTraceab(scope.row)">
                    详情
                </el-button>
                <el-button link type="info" size="small" @click="FindTraceabs(scope.row)">
                    修改
                </el-button>
                <el-button link type="success" size="small" @click="">
                    导出溯源码
                </el-button>
                <el-button link type="danger" size="small" @click="DelTraceab(scope.row.id)">
                    删除
                </el-button>

            </template>
        </el-table-column>
    </el-table>
    <!-- 新增 -->
    <el-dialog v-model="dialogTableVisible" title="新增" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="ruleForm.goodsName" />
            </el-form-item>

            <el-form-item label="生产批次" prop="productionBatch">
                <el-input v-model="ruleForm.productionBatch" disabled />
            </el-form-item>

            <el-form-item label="保质期" prop="expirationDate">
                <el-input v-model="ruleForm.expirationDate" />
            </el-form-item>

            <el-form-item label="生产许可号" prop="productionLicense">
                <el-input v-model="ruleForm.productionLicense" disabled />
            </el-form-item>

            <el-form-item label="生产企业" prop="productionFrim">
                <el-input v-model="ruleForm.productionFrim" />
            </el-form-item>
            <el-form-item label="封面图">
                <el-upload class="avatar-uploader" action="http://localhost:5264/api/Image/Img" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!-- 分页 -->
    <el-pagination v-model:current-page="info.pageindex" v-model:page-size="info.pagesize" :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper" :total="info.totalcount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />

    <!-- 修改 -->
    <el-dialog v-model="UpdatedialogTableVisible" title="修改" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="Updateforms" :rules="rules" label-width="auto">
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="Updateforms.goodsName" />
            </el-form-item>

            <el-form-item label="生产批次" prop="productionBatch">
                <el-input v-model="Updateforms.productionBatch" disabled />
            </el-form-item>

            <el-form-item label="保质期" prop="expirationDate">
                <el-input v-model="Updateforms.expirationDate" />
            </el-form-item>

            <el-form-item label="生产许可号" prop="productionLicense">
                <el-input v-model="Updateforms.productionLicense" disabled />
            </el-form-item>

            <el-form-item label="生产企业" prop="productionFrim">
                <el-input v-model="Updateforms.productionFrim" />
            </el-form-item>
            <el-form-item label="封面图">
                <el-upload class="avatar-uploader" action="http://localhost:5264/api/Image/Img" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="Updateforms.image" :src="Updateforms.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="UpdateTraceab()">
                    确定
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import moment from 'moment';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, type ComponentSize } from 'element-plus'
import IconDocumentation from '@/components/icons/IconDocumentation.vue';
import { ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { fa } from 'element-plus/es/locales.mjs';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
//新增
const dialogTableVisible = ref(false)
//列表查询
const tableData = ref([])
const info = reactive({
    pageindex: 1,
    pagesize: 5,
    totalcount: 0,
    totalpage: 0,
})
//网络请求
const gettraceab = () => {
    axios.get("http://localhost:5264/api/Rabbit/GetTranceab", { params: info }).then(res => {
        tableData.value = res.data.pagedata
        info.totalcount = res.data.totalcount
        info.totalpage = res.data.totalpage
    })
}

//分页
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    info.pagesize = val;
    gettraceab()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    info.pageindex = val;
    gettraceab()
}
//新增


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "goodsName": "",
    "productionBatch": moment().format("YYYYMMDD"),
    "expirationDate": "",
    "productionLicense": "SC" + moment().format("YYYYMMDDHHmmss"),
    "productionFrim": "",
    "image": ""
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],

})
//新增网络请求
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("http://localhost:5264/api/Rabbit/AddTranceab", ruleForm).then(res => {
                if (res.data.code == 2000) {
                    ElMessage.success(res.data.msg)
                    gettraceab()
                    dialogTableVisible.value = false
                }
                else {
                    ElMessage.error(res.data.msg)
                }
            })

        } else {

        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
//上传
import type { UploadProps } from 'element-plus'
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    ruleForm.image = response.data
    Updateforms.image = response.data
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('格式只能是JPG!')
        return false
    }
    return true
}
//全选
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
// 详情
const FindTraceab = (row: any) => {
    router.push({
        path: '/details',
        query: {
            "id": row.id,
            "goodsName": row.goodsName,
            "productionBatch": row.productionBatch,
            "expirationDate": row.expirationDate,
            "productionLicense": row.productionLicense,
            "productionFrim": row.productionFrim,
            "image": row.image
        }
    })
}

//删除
const DelTraceab = (id: any) => {
    ElMessageBox.confirm(
        '你确定要删除此数据吗?',
        '删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put("http://localhost:5264/api/Rabbit/DelTraceab", { id: id }).then(res => {
                if (res.data.code = 2000) {
                    ElMessage.success(res.data.msg)
                    gettraceab()
                }
                else {
                    ElMessage.error(res.data.msg)
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//修改
const UpdatedialogTableVisible = ref(false)
const Updateforms = reactive({
    "id": '',
    "goodsName": "",
    "productionBatch": "",
    "expirationDate": "",
    "productionLicense": "",
    "productionFrim": "",
    "image": ""
})
const UpdateTraceab = () => {
    axios.put("http://localhost:5264/api/Rabbit/Handle", Updateforms).then(res => {
        if (res.data.code == 2000) {
            ElMessage.success(res.data.msg)
            gettraceab()
            UpdatedialogTableVisible.value = false

        }
        else {
            ElMessage.error(res.data.msg)
        }
    })
}
//反填
const FindTraceabs = (row: any) => {
    UpdatedialogTableVisible.value = true
    Object.assign(Updateforms, row)
}

//挂载函数
onMounted(() => {
    gettraceab()
})

</script>























<!-- 样式 -->
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>